<template>
  <div class="training-form">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
    >
      <!-- 培训名称 -->
      <el-form-item label="培训名称" prop="trainingName">
        <el-input
          v-model="form.trainingName"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>

      <!-- 培训主题 -->
      <el-form-item label="培训主题" prop="trainingTheme">
        <el-select
          v-model="form.trainingTheme"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option label="主题1" value="theme1" />
          <el-option label="主题2" value="theme2" />
        </el-select>
      </el-form-item>

      <!-- 培训时间 -->
      <el-form-item label="培训时间" prop="dateRange">
        <el-date-picker
          v-model="form.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 320px"
        />
      </el-form-item>

      <!-- 福利课程 -->
      <el-form-item label="福利课程" prop="welfareCourse">
        <el-select
          v-model="form.welfareCourse"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option label="课程1" value="course1" />
          <el-option label="课程2" value="course2" />
        </el-select>
      </el-form-item>

      <!-- 福利题库 -->
      <el-form-item label="福利题库" prop="welfareQuestionBank">
        <el-select
          v-model="form.welfareQuestionBank"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option label="题库1" value="bank1" />
          <el-option label="题库2" value="bank2" />
        </el-select>
      </el-form-item>

      <!-- 底部按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          @click="handleSaveAndImport"
          style="width: 120px"
        >
          保存，去导入学员
        </el-button>
        <el-button
          type="primary"
          @click="handleSave"
          style="width: 80px; margin: 0 10px"
        >
          保存
        </el-button>
        <el-button
          @click="handleCancel"
          style="width: 80px"
        >
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        trainingName: '',
        trainingTheme: '',
        dateRange: [], // 使用数组存储日期范围
        welfareCourse: '',
        welfareQuestionBank: '',
      },
      rules: {
        trainingName: [
          { required: true, message: '请输入培训名称', trigger: 'blur' },
        ],
        dateRange: [
          { required: true, message: '请选择培训时间范围', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (!value || value.length < 2) {
                callback(); // 由必填校验处理
                return;
              }

              const start = new Date(value[0]);
              const end = new Date(value[1]);

              if (start > end) {
                callback(new Error('开始日期不能大于结束日期'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        welfareCourse: [
          { message: '请选择福利课程', trigger: 'change' }
        ],
        welfareQuestionBank: [
          { message: '请选择福利题库', trigger: 'change' }
        ]
      },
    };
  },
  methods: {
    // 保存并去导入学员
    handleSaveAndImport() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 将日期范围数组解构为 startDate 和 endDate
          const [startDate, endDate] = this.form.dateRange;
          console.log('保存并去导入学员', {
            ...this.form,
            startDate,
            endDate
          });
          // 跳转到导入学员页面
          // this.$router.push('/import-students');
        }
      });
    },
    // 保存
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const [startDate, endDate] = this.form.dateRange;
          console.log('保存', {
            ...this.form,
            startDate,
            endDate
          });
        }
      });
    },
    // 取消
    handleCancel() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
.training-form {
  padding: 20px;
}
</style>
